<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Image Gallery</title>
    <link rel="stylesheet" href="css/layout.css" media="screen" />
</head>
<body>
<h1>Snapshots</h1>
<ul id="imagegallery">
    <li>
        <a href="images/bigben.jpg" title="Big Ban" class="popup">
            <img src="images/thumbnail_bigben.jpg" alt="Big Ban" />
        </a>
    </li>
    <li>
        <a href="images/coffee.jpg" title="Coffee" class="popup">
            <img src="images/thumbnail_coffee.jpg" alt="Coffee" />
        </a>
    </li>
    <li>
        <a href="images/fireworks.jpg" title="Fire Works" class="popup">
            <img src="images/thumbnail_fireworks.jpg", alt="Fire Works" />
        </a>
    </li>
</ul>

<!--<img id="placeholder" src="images/placeholder.gif" alt="my image gallery" />-->

<!--<p id="description" hidden="true">Choose a image</p>-->
<script type="text/javascript" src="js/showPic.js"></script>
</body>
</html>
